<template>
    <div class="sign_up">
        <Logo/>
        <div class="title">创建你的账户</div>
        <div class="forms">
            <Input v-model="email" v-model:rules-content="ruleUserEmail" label="email">
                <template #placeholder>请输入您的邮箱地址</template>
            </Input>
            <div class="sing_yzm">
                <Input v-model="verCode"
                       label="verCode"
                       v-model:rules-content="ruleUseVerCode"
                       style="width: 50%;">
                    <template #placeholder>邮箱验证码</template>
                </Input>

                <div v-show="show" class="yzm_div">
                    <button style="height:100%;width: 100%;cursor: pointer" v-if="!isLoading" @click="getVerCode"
                            class="_yzm_btn">
                        {{ statusText }}
                    </button>
                    <Loading v-if="isLoading" :loading="isLoading" border-color="#10a37f"></Loading>
                </div>
                <button style="height: 52px;width: 40%" class="_yzm_btn" v-show="!show" disabled="disabled">
                    {{ count }}秒重新发送
                </button>
            </div>
            <Input v-model="password"
                   label="password"
                   type="password"
                   @keyup.enter="contribute"
                   v-model:rules-content="ruleUsePassword"
                   style="margin-top: 21px;">
                <template #placeholder>请输入您的密码</template>
            </Input>
            <Input @keyup.enter="contribute" v-model="inviteCode" style="margin-top: 21px;">
                <template #placeholder>邀请码（非必填）</template>
            </Input>
            <Button class="continue" :disabled="loading" :loading="loading" @click="contribute">继续</Button>
            <div class="tips">
                <span>已有帐户？</span>
                <span @click="signUps">登录</span>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import {ref, onUnmounted} from 'vue'
import {useRouter} from 'vue-router'
import {Button, Input, Loading, Logo} from '@/components'
import {SetRules, ruleType, ruleTem} from '@/util'
import {signUpCode, signUp} from "@/api/login";
import {ElMessage} from 'element-plus'
import {EnumLocalStorageKeys} from '@/constants/EnumLocalStorageKey';

const router = useRouter();
const show = ref<Boolean>(true)
const count = ref<number>(60)
const timer = ref<number | any>()
const defaultInviteCode = sessionStorage.getItem(EnumLocalStorageKeys.InviteCode) ?? '';
let email = ref<string>('')
let verCode = ref<string>('')
let password = ref<string>('')
let inviteCode = ref<string>(defaultInviteCode)
let loading = ref<boolean>(false)
let ruleUserEmail = ref<ruleType>(ruleTem)
let ruleUseVerCode = ref<ruleType>(ruleTem)
let ruleUsePassword = ref<ruleType>(ruleTem)
let statusText = ref<string>('获取验证码')
let isLoading = ref<boolean>(false)
let styles = {
  height: '52px',
  width: '40%',
  cursor: 'pointer',
  background: '#fff',
  color: 'rgb(111, 119, 128)',
  border: '1px solid rgb(194, 200, 208)'
}
//watchRules
//获取验证码
const getVerCode = async () => {
  //先验证邮箱是否正确或者填写
  ruleUserEmail.value = SetRules('email', email.value);
  if (ruleUserEmail.value.isRules) return
  isLoading.value = true
  //获取验证码,成功则开始倒计时,然后修改文字为重新获取
  // 失败则直接更改文字为重新获取
  try {
    const result = await signUpCode({to: email.value})
    let {code, msg} = result
    if (code === 0 && msg === 'SUCCESS') {
      ElMessage.success('发送成功')
    } else {
      ElMessage.error('获取失败,请重新获取')
      isLoading.value = false
      statusText.value = '重新获取'
      return
    }
    isLoading.value = false
    statusText.value = '重新获取'
    show.value = false
    timer.value = setInterval(() => {
      if (count.value > 1 && count.value <= 60) {
        count.value--;
      } else {
        show.value = true;
        clearInterval(timer.value);
        count.value = 60
        timer.value = null;
      }
    }, 1000);
  } catch (e) {
    console.log(e)
    ElMessage.error('获取失败,请重新获取')
    isLoading.value = false
    statusText.value = '重新获取'
    show.value = true
  }
}

const signUps = () => {
  router.push('loginUser')
}
//继续按钮
const contribute = async () => {


  ruleUserEmail.value = SetRules('email', email.value);
  ruleUseVerCode.value = SetRules('verCode', verCode.value);
  ruleUsePassword.value = SetRules('password', password.value);
  if (![ruleUserEmail.value.isRules, ruleUseVerCode.value.isRules, ruleUsePassword.value.isRules].every((item: boolean) => !item)) return
  loading.value = true
  let params = {
    email: email.value,
    code: verCode.value,
    password: password.value,
    inviteCode: inviteCode.value,
  }

  const result = await signUp(params)

  let {code, msg} = result
  if (code === 0 && msg === 'SUCCESS') {
    ElMessage.success('账号创建成功,跳转到登录页')
    sessionStorage.removeItem(EnumLocalStorageKeys.InviteCode)
    loading.value = false
    router.push('loginUser')
  } else {
    ElMessage.error(msg)
    loading.value = true
  }


}

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
.sign_up {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.title {
  font-size: 36px;
  font-family: Microsoft YaHei;
  margin-top: 50px;
}

.forms {
  width: 320px;
  margin: 50px auto 0;
  font-size: 0;
}

.sing_yzm {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 15px;
}

.yzm_div {
  width: 40%;
  height: 52px;
  position: relative;
  box-shadow: 0 0 0 1px rgb(194, 200, 208) inset;
  border-radius: 4px;
}

._yzm_btn {
  border: none;
  box-shadow: 0 0 0 1px rgb(194, 200, 208) inset;
  outline: none;
  border-radius: 4px;
  color: rgb(111, 119, 128);
  text-align: center;
  display: inline-block;
  background: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  padding: 0 8px;
  white-space: nowrap;
  margin-left: 0;
}

.continue {
  margin-top: 21px;
  font-size: 16px;
}

.tips {
  margin-top: 21px;

  span {
    &:nth-child(1) {
      color: rgba(1, 1, 1, 0.4);
      font-size: 12px;
    }

    &:last-child {
      color: rgba(16, 163, 127, 0.8);
      font-size: 12px;
      margin-left: 8px;
      cursor: pointer;
    }
  }
}
</style>
